<html style=" background-color: aliceblue; ">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>details</title>
</head>

<body>
  <div class="container ">
    <nav class="navbar navbar-expand-lg navbar-light">
      <a class="navbar-brand" href="http://localhost:1337/#">首页</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" id="flip"
        aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-item nav-link" href="#">下载App </a>
          <a class="nav-item nav-link" href="#" style='display:inline' id='create'>IT技术</a>
        </div>
        <a class="nav-ik" href="#" style="right: 0;position: absolute;" id='login'>登录</a>
      </div>
    </nav>
  </div>
  <section style=" background-color: aliceblue; ">
    <div class="container " style="display: flex;">
      <form action="/rent/details/<%= rent.id %>" method="POST" style=" margin-top: 20px; ">
        <div class="card" id="aab" style=" max-width: 700px; ">
          <br>
          <div class="col-11 ">
            <h4>
              <%= rent.title %>
            </h4>
          </div>
          <div class="row" >
            <div class=" col-12 col-sm-12 col-lg-12 col-xl-12" id="div1">
              <div class="list-group" style=" padding: 12px; ">
                <a class="list-group-item list-group-item-action">
                  <div class="row">
                    <h5> 简介： </h4>
                      <%= rent.estate %>
                  </div>
                </a>
                <a class="list-group-item list-group-item-action">
                  <div class="row">
                    <h5> 正文： </h4>
                      <%= rent.content %>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </form>
      <div id="right-panel" class="card col-3 col-sm-3 col-lg-3 col-xl-3" style="margin-top: 20px;max-height: 681px;position: fixed;right: 12%;max-width: 400px;">
        <% creators.forEach((model) => { %>
        <div id="div01">
          <div class="row">
            <div class="col-3 col-sm-3 col-lg-3 col-xl-3"> <img style="border-radius: 9.25rem;"
                class="img-fluid img-thumbnail" src="<%= model.url %>" value="cover" width="150" height="150" /></div>
            <div class="col-9 col-sm-9 col-lg-9 col-xl-9" id="div1">
              <ul class="list-group">
                <li class="list-group-item"><label>
                  </label> <%= model.name %>
                </li>
                <li class="list-group-item"><label>
                  </label> <%= model.desc %>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <% }); %>
      </div>
    </div>
  </section>
  <style>
    nav a {
      font-family: "MuseoModerno", cursive;
      font-size: 16px;
      font-weight: 400;
    }

    section #div01 {
      padding: 20px 20px 20px;
    }

    section h5 {
      font-family: "Noto Sans TC", sans-serif;
      font-size: 18px;
    }

    section #title {
      font-family: "Noto Sans TC", sans-serif;
      font-size: 20px;
      margin-bottom: 20px;
    }

    section li {
      font-family: "open Sans", sans-serif;
      font-size: 14px;
    }

    section i {
      font-size: smaller;
      color: dimgrey;
    }

    section img {
      width: 100%;
    }

    section .container {
      margin-bottom: 63px;
    }



    @media only screen and (max-width: 991px) {
      section #div01 {
        margin-bottom: 17px;
      }
    }

    @media only screen and (max-width: 767px) {
      #links {
        margin-top: 20px;
      }
    }

    @media only screen and (max-width: 574px) {
      #links {
        margin-top: 1px;
      }
    }

  </style>
</body>



</html>
